<template>
  <div class="content">
    <div class="left-box">
      <VBtn style="width:170px;height: 30px;">新对话</VBtn>
      <div class="title">今天</div>
      <div class="today-box">

        <!--        今天提问记录-->
        <div v-for="(item,index) in todayQuestionsData" :key="index">
          <el-dropdown trigger="contextmenu">
            <span class="el-dropdown-link records"> {{ item }} </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="open(item,index)">删除</el-dropdown-item>
                <el-dropdown-item>重命名</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
      <div class="title">前七天</div>
      <div class="history-box">
        <!--        历史提问记录-->
        <div v-for="(item,index) in historyQuestionsData" :key="index">
          <el-dropdown trigger="contextmenu">
            <span class="el-dropdown-link records"> {{ item }} </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="open(item,index)">删除</el-dropdown-item>
                <el-dropdown-item>重命名</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
    </div>
    <div class="right-box">
      <div class="search-title">
        全球变暖
      </div>
      <div class="dialogue-box">
        <!--        问题-->
        <div class="questions-box">
          <div class="questions-info">
            <!--问题信息-->
            <div>
              <span class="send-time">2025-01-15 12:22:34</span>
              <div class="questions">全球变暖</div>
            </div>
            <!--            头像-->
            <div class="avatar-box">
              <img src="https://pixnio.com/zh/media/zh-3261818" alt=""
                   style="width: 100%;height: 100%;border: none;outline: none"
              >
            </div>
          </div>
        </div>
        <!--        回答-->
        <div class="answers-box">
          <div class="avatar-box">
            <img src="https://pixnio.com/zh/media/zh-3261818" alt=""
                 style="width: 100%;height: 100%;border: none;outline: none"
            >
          </div>
          <!--回答信息-->
          <div style="width: 100%">
            <span class="answer-time">2025-01-15 12:22:34</span>
            <div class="answers">全球变暖</div>
          </div>
        </div>
      </div>
      <div class="input-box">
        <textarea rows="5" cols="100" class="input" placeholder="问我任何问题...(Enter发送，Shift + Enter 换行)"
        ></textarea>
        <VBtn class="submit">发送</VBtn>
      </div>
    </div>
    <!--    弹出框-->
    <el-dialog
      v-model="dialogVisible"
      title="删除"
      width="500"
      :modal="false"
      :show-close="false"
      style="position: absolute;top: 30%;left: 50%;transform: translate(-50%, -50%);
      background-color:rgb(var(--v-theme-surface));"
    >
      <span>确定要删除“{{ records }}”会话?</span>
      <template #footer>
        <div class="dialog-footer">
          <el-button class="cancel" @click="dialogVisible = false">取消</el-button>
          <el-button
            type="primary"
            style="background-color: #8c57ff;color: #ece4ff;border-color:#8c57ff"
            @click="dialogVisible = false"
          >
            删除
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ElMessage, ElMessageBox } from 'element-plus'

let todayQuestionsData = ref()
todayQuestionsData.value = [
  '全球变暖是为什么？',
  '为什么天空是蓝色的？',
  '全球变暖是为什么？',
  '为什么天空是蓝色的？',
  '全球变暖是为什么？',
  '为什么天空是蓝色的？',
]
let historyQuestionsData = ref()
historyQuestionsData.value = [
  '全球变暖是为什么？',
  '为什么天空是蓝色的？',
  '全球变暖是为什么？',
  '为什么天空是蓝色的？',
  '全球变暖是为什么？',
  '为什么天空是蓝色的？',
  '全球变暖是为什么？',
  '为什么天空是蓝色的？',
  '全球变暖是为什么？',
  '为什么天空是蓝色的？',
  '全球变暖是为什么？',
  '为什么天空是蓝色的？',
]
let dialogVisible = ref(false)
let records = ref('')
const open = (item, index) => {
  records.value = item
  dialogVisible.value = true
}
</script>

<style lang="scss" scoped>
:root {
  --v-theme-surface: 255, 255, 255; /* 示例值 */
  --text-opposite: rgb(
      calc(255 - var(--v-theme-surface-r)),
      calc(255 - var(--v-theme-surface-g)),
      calc(255 - var(--v-theme-surface-b))
  );
}

.content {
  width: 100%;
  height: 85vh;
  display: flex;
  //border: 1px solid #e4e4e4;
  border-radius: 4px;
  overflow: hidden;
}

//左侧历史
.left-box {
  width: 200px;
  height: 100%;
  //background-color: #fff;
  background-color: rgb(var(--v-theme-surface));
  border-right: 1px solid #e4e4e4;
  padding: 15px;
}

.today-box,
.history-box {
  width: 100%;
  min-height: 150px;
  max-height: 150px;
  overflow-y: auto;
}

//消除滚动条
.today-box::-webkit-scrollbar,
.history-box::-webkit-scrollbar {
  //display: none;
  width: 0;
}

.history-box {
  min-height: 350px;
  max-height: 350px;
}

//提问记录
.records {
  width: 169px;
  padding: 10px 0;
  padding-left: 10px;
  border-radius: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

::v-deep(.el-dropdown) {
  color: var(--text-opposite);
}

.records:hover {
  color: #8C57FF;
  background-color: #ece4ff;
}

.title {
  font-size: 14px;
  font-weight: 600;
  margin-top: 20px;
}

//右侧对话
.right-box {
  width: calc(100% - 200px);
  height: 100%;
  //background-color: #f7f6f7;
  background-color: rgb(var(--v-theme-surface));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

//搜索题目
.search-title {
  width: 100%;
  height: 50px;
  box-sizing: border-box;
  //background-color: #fff;
  background-color: rgb(var(--v-theme-surface));
  font-weight: 600;
  padding: 15px;
  border-bottom: 1px solid #e4e4e4;
}

//对话框
.dialogue-box {
  width: 100%;
  height: calc(100% - 150px);
  box-sizing: border-box;
  position: relative;
  font-size: 14px;
  overflow-y: auto;
}

.dialogue-box::-webkit-scrollbar {
  width: 0;
}

//问题
.questions-box {
  width: 100%;
  min-height: 50px;
  max-height: 100px;
  display: flex;
  box-sizing: border-box;
  justify-content: end;
}

//提问信息
.questions-info {
  min-width: 200px;
  max-width: 400px;
  display: flex;
  justify-content: end;
}

//提问时间，回答时间
.send-time,
.answer-time {
  display: inline-block;
  width: 100%;
  font-size: 12px;
  color: #b5b3b3;
  text-align: right;
  margin-bottom: 10px;
}

.answer-time {
  text-align: left;
}

//提问内容
.questions {
  min-width: 100px;
  max-width: 100%;
  min-height: 50px;
  max-height: 50px;
  //background-color: #eee;
  background: rgb(var(--v-table-header-color)) !important;
  line-height: 50px;
  padding: 0 20px;
  border-radius: 10px;
}

.avatar-box {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden;
  border: none;
  margin: 10px;
}

//回答
.answers-box {
  width: 100%;
  min-height: 100px;
  display: flex;
  margin-bottom: 20px;
}

//回答内容
.answers {
  width: 90%;
  min-height: 100px;
  //background-color: #fff;
  background: rgb(var(--v-table-header-color)) !important;
  padding: 20px;
  border-radius: 10px;
}

//输入框
.input-box {
  width: 100%;
  height: 150px;
  box-sizing: border-box;
  //background-color: #fff;
  background-color: rgb(var(--v-theme-surface));
  border-top: 1px solid #e4e4e4;
  padding: 15px;
  position: relative;
}

//问题输入框
.input {
  border: none;
  outline: none;
  resize: none;
  color: var(--text-opposite);
}

//发送按钮
.submit {
  width: 100px;
  height: 30px;
  position: absolute;
  right: 15px;
  bottom: 15px;
}

::v-deep(.el-dropdown-menu__item:hover) {
  background-color: #ece4ff;
  color: #8C57FF;
}

::v-deep(.el-dialog__title) {
  color: var(--text-opposite);
}

::v-deep(.el-dialog__body) {
  color: var(--text-opposite);
}

.cancel:hover {
  background-color: #ece4ff;
  color: #8C57FF;
  border-color: #ece4ff;
}
</style>

